<template>
    <div class="container">
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4" v-for="item in data" :key="item.name">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.name }}</span>
                        </div>
                    </template>
                    <div class="info">
                        <div>{{ item.number }}</div>
                        <div>{{ item.unit }}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

</template>

<script lang="ts" setup name="Badge">

defineProps({
    data: {
        type: Object as any,
        default: () => { },
        require: true
    }
})

</script>

<style scoped>
.container {
    margin-top: 20px;
}

.container /deep/.el-card__header {
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 6px 16px !important;
}

.info {
    display: flex;
    justify-content: space-around;
}

.info div:last-child {
    font-size: 11px;
}
</style>